<template>
    <div
        class="move_box"
        :id="moveInfo.dragId"
        :style="{
            width: moveInfo.width + 'px',
            left: moveInfo.coordinate.x + 'px',
            top: moveInfo.coordinate.y + 'px',
            height: moveInfo.height + 'px'
        }"
    >
        <div class="drag-content">
            <div class="content-text">
                <!-- 拖拽图标 -->
                <div class="drag-icon">
                    <i
                        class="icon el-icon-rank"
                        @mousedown.stop="dragDiv($event)"
                        @mouseup.stop="clearEvent($event)"
                    ></i>
                </div>
                {{ moveInfo.text }}
            </div>
            <!-- 宽度改变组件 -->
            <ChangeWidth
                :moveId="moveInfo.moveId"
                index="0"
                @widthChange="changeTheWidth"
                @clearEvent="clearEvent"
            ></ChangeWidth>
            <!-- 高度改变组件 -->
            <ChangeHeight
                :moveId="moveInfo.moveId"
                index="1"
                @heightChange="changeTheHeight"
                @clearEvent="clearEvent"
            ></ChangeHeight>
        </div>
    </div>
</template>

<script>
import ChangeWidth from '@/components/ChangeWidth.vue';
import ChangeHeight from '@/components/ChangeHeight.vue';

export default {
    name: 'MoveBox',
    components: { ChangeWidth, ChangeHeight },
    data() {
        return {
            moveInfo: {
                dragId: 'smallDragBoxId',
                moveId: 'smallMoveBoxId',
                text: '可拖动且改变大小的盒子',
                width: 400,
                height: 200,
                // 上边距和左边距
                coordinate: {
                    x: 200,
                    y: 200
                }
            }
        };
    },
    methods: {
        // 拖动
        dragDiv(el, index) {
            // dragId: 可拖动区域的唯一标识
            // moveId: 改变宽度组件唯一标识
            const { dragId, coordinate } = this.moveInfo;
            let obig = document.getElementById('maxBoxId');
            let osmall = document.getElementById(dragId);
            // 用于保存效的 div 拖拽前的坐标
            osmall.startX = el.clientX - osmall.offsetLeft;
            osmall.startY = el.clientY - osmall.offsetTop;
            document.onmousemove = (e) => {
                let left, top;
                left = e.clientX - osmall.startX;
                top = e.clientY - osmall.startY;
                osmall.style.left = left + 'px';
                osmall.style.top = top + 'px';
                coordinate.x = left;
                coordinate.y = top;
                if (left <= 0) {
                    osmall.style.left = 0 + 'px';
                    coordinate.x = 0;
                }
                if (top <= 0) {
                    osmall.style.top = 0 + 'px';
                    coordinate.y = 0;
                }
                if (left >= obig.offsetWidth - osmall.offsetWidth) {
                    osmall.style.left =
                        obig.offsetWidth - osmall.offsetWidth + 'px';
                    coordinate.x = obig.offsetWidth - osmall.offsetWidth;
                }
                if (top > obig.offsetHeight - osmall.offsetHeight) {
                    osmall.style.top =
                        obig.offsetHeight - osmall.offsetHeight + 'px';
                    coordinate.y = obig.offsetHeight - osmall.offsetHeight;
                }
            };
        },
        // 改变尺寸
        changeTheWidth(params) {
            const { index, width } = params;
            let theLeft;
            const { dragId } = this.moveInfo;
            let osmall = document.getElementById(dragId);
            let boxWidth = document.getElementById('maxBoxId').offsetWidth;
            theLeft = osmall.style.left;
            const newWidth = this.moveInfo.width + width;
            // outWidth 拖动宽度时超出box宽度
            const outWidth =
                Number(theLeft.slice(0, theLeft.length - 2)) +
                Number(newWidth) -
                Number(boxWidth);
            // 如果超出box将截取留下的
            if (outWidth >= 0) {
                this.moveInfo.width =
                    Number(boxWidth) -
                    Number(theLeft.slice(0, theLeft.length - 2));
            } else {
                this.moveInfo.width = newWidth;
            }
            // 设置div的最小宽度和最大宽度
            if (this.moveInfo.width < 200) {
                this.moveInfo.width = 200;
            }
            if (this.moveInfo.width > 900) {
                this.moveInfo.width = 900;
            }
        },
        // 改变高度
        changeTheHeight(params) {
            const { index, height } = params;
            let top;
            let osmall = document.getElementById(this.moveInfo.dragId);
            let boxHeight = document.getElementById('maxBoxId').offsetHeight;
            top = osmall.style.top;
            const newHeight = this.moveInfo.height + height;
            // outHeight 拖动高度超出 box 的高度
            const outHeight =
                Number(top.slice(0, top.length - 2)) +
                Number(newHeight) -
                Number(boxHeight);
            // 如果超出box将截取留下的
            if (outHeight >= 0) {
                this.moveInfo.height =
                    Number(boxHeight) - Number(top.slice(0, top.length - 2));
            } else {
                this.moveInfo.height = newHeight;
            }
            // 设置 div 的最小高度和最大高度
            if (this.moveInfo.height < 100) {
                this.moveInfo.height = 100;
            }
            if (this.moveInfo.height > 400) {
                this.moveInfo.height = 400;
            }
        },
        // 清除鼠标事件
        clearEvent() {
            document.onmousemove = null;
            document.onmouseup = null;
        }
    }
};
</script>

<style lang="less" scoped>
.move_box {
    width: 300px;
    height: 150px;
    position: absolute;
    top: 400px;
    right: 400px;
    border: 1px dashed #ccc;
}
</style>
